<template>
	<view>
		<view class="top disc jsa aic">
			<image :src="imguser+'/minis/order/succeed.png'" mode=""></image>
			<view class="fw fz12">资料已完善</view>
		</view>
		<view class="tit tac fw" v-if="status==2&&flowN<=4">推荐产品</view>

    <view v-if="Object.keys(tjcplist).length === 0">
      <u-empty text="无推荐产品-无法转权证处理" mode="list"></u-empty>
    </view>

		<view class="list" v-if="status==2&&flowN<=4">
			<view class="bars disb aic" v-for="(item, index) in tjcplist" :key="index" >
        <u-radio-group v-model="selValue" @change="radioGroupChange">
				<view class="left"  @click="select(item)">
					<view class="dt aic disp">
						<image :src="item.productImg" mode=""></image>
						<text class="fw mag">{{item.productName}}</text>
					</view>
					<view class="p">申请流程: {{item.procedures}}</view>
					<view class="p">还款方式: {{item.modeOfRepayment}}</view>
					<view class="p">{{annualInterestLabel}}: {{item.timeRate}}</view>
					<view class="p">期限: {{item.deadline}}</view>
					<view class="p">
<!--            额度:{{item.quotaFormula?item.quotaFormula:''}}-->
            <u--text :text="maxAmountLabel+':'"></u--text>
            <u--text mode="price" :text="item.quotaFormula" size="17" color="#D34200" bold="true"></u--text>
          </view>
					<view class="p">
<!--            月供:{{item.monthlyInfo?item.monthlyInfo:''}}-->
            <u--text text="月供:"></u--text>
            <u--text mode="price" :text="item.monthlyInfo" size="17" color="#D34200" bold="true"></u--text>
          </view>
				</view>


        <view class="right">

            <u-radio
                @change="radioChange"
                :name="index"
                :disabled="item.disabled"
            >
            </u-radio>

      </view>
        </u-radio-group>
			
<!--				<view class="right" v-if="!item.check" @click="select(item)"></view>-->
<!--				<image class="image" src="../../static/images/search/select.png" mode="" v-if="item.check"-->
<!--					@click="select(item)"></image>-->
			</view>
		</view>
		<view class="btn colorf fz12 tac" @click="toNext" v-if="status==2&&flowN<=4 && Object.keys(tjcplist).length > 0">转权证</view>
		<view class="btn colorf fz12 tac" @click="back" v-if="flowN>=5">订单已转权证，返回</view>
	</view>
</template>

<script>
	import {
		toWarrant,
		getCustomerDetail,
		getCheckProductAccess
	} from "../../api/search.js"
	import config from '@/common/config'
  import UText from "../../uni_modules/uview-ui/components/u-text/u-text.vue";
  import value from "../../uni_modules/uview-ui/components/u-text/value";
	export default {
    computed: {
      value() {
        return value
      }
    },
    components: {UText},
		data() {
			return {
        selValue:0,
				orderId: null,
				list: [],
        imguser: config.baseImgUrl,
				check:[],
				flowN: null,
				tjcplist: [],
				status: uni.getStorageSync('userInfo').userType,
				annualInterestLabel: '年化利率',
				maxAmountLabel: '额度'
			};
		},
		onLoad(option) {
			this.orderId = option.id
			this.getDetail(option.id)
			this.gettuijcp(option.id)
			this.getWordings()
		},
		methods: {
			select(item) {
        // console.log(item)
        // console.log(item.check)
				// item.check = !item.check
			},
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
         console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
         console.log(e);
      },
			//转权证
			toNext() {
				const selectedRows = this.tjcplist.filter(row => row.check);
				toWarrant({
					orderId: this.orderId,
					userId: '',
					voList:selectedRows
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast('转权证成功')
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 1000)
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			//返回
			back() {
				uni.switchTab({
					url: "/pages/search/search"
				})
			},
			getDetail(id) {
				getCustomerDetail({
					orderId: id
				}).then(res => {
					this.flowN = res.data.recordRespVO.flowN
				})
			},
			gettuijcp(id) {
				getCheckProductAccess({
					orderId: id
				}).then(res => {
					  this.tjcplist = res.data.map((item) => ({  
					     ...item,   
					     check: false  
					 }));
					
					//console.log(tjcplist)
				})
			},
			// 获取缓存的文案配置
			getWordings() {
				const maxAmount = uni.getStorageSync('max_amount')
				if (maxAmount) {
					this.maxAmountLabel = maxAmount
				}
				
				const annualInterest = uni.getStorageSync('annual_interest')
				if (annualInterest) {
					this.annualInterestLabel = annualInterest
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 200rpx;
		color: rgb(211, 66, 0);

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.tit {
		padding: 30rpx;
	}

	.list {
		padding: 20rpx;

		.bars {
			padding: 30rpx 40rpx;
			margin: 20rpx 0;
			border-radius: 10rpx;
      box-shadow: 0 0 20rpx #ccc;
      position: relative;
			.left {
				width: 100%;

				.dt {
					border-bottom: 1px solid #E4E4E4;
					height: 60rpx;
					line-height: 60rpx;
				}

				.p {
					margin: 10rpx 0;
				}

				.mag {
					margin: 0 10rpx;
					line-height: 60rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.tag {
					padding: 4rpx 10rpx;
					border-radius: 20rpx;
					color: rgb(173, 78, 0);
					background-color: rgb(255, 213, 145);
				}
			}

			.right {
				width: 30rpx;
				height: 30rpx;
				//border: 1rpx solid #a3a3a3;
				position: absolute;
				right: 20rpx;
				top: 20rpx;

			}

			.image {
				width: 30rpx;
				height: 30rpx;
				border: 1rpx solid #a3a3a3;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
		}
	}

	.btn {
		width: 80%;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #3F51B5;
		margin: 40rpx auto;
	}
</style>